<template>
  <div class="logistics-container">
    <div v-if="loading" class="skeleton-container" style="margin-top: 20rem">
      <van-skeleton title :row="20" />
    </div>
    <div v-else>
      <button class="back-button">
        <router-link to="/" style="color: #333">
          <van-icon name="arrow-left" />
        </router-link>
      </button>
      <div class="title-container">
        <div class="title">国际物流</div>
      </div>
      <div class="content">
        <div class="description">
          <p>使用“乐淘一番”平台购买的日本商品，均将通过国际直邮物流的方式运送到您的手中。</p>
          <p class="description-margin">目前提供以下几种物流方式：</p>
        </div>
        <div class="tabs-container">
          <van-tabs sticky offset-top="48rem" class="tabs">
            <van-tab title="菜鸟航空快线" class="tab-content" style="margin-bottom: 100rem">
              <div class="tab-description">
                <span class="weight-info">
                  本线路根据订单打包完的实际重量计算运费。单个包裹5.0kg以内,超出则无法发送。单个包裹重量不足0.5kg按照0.5kg计算。<br />
                  ※注体积限制长宽高三边总和不超过180cm,任意一条单边长不超过110cm,超出无法发送
                </span>
                <br />
                <span class="shipment-plan"> 仓库发货计划： </span>
                <br />
                <span class="shipment-plan-time">
                  每周一、周四（节假日除外），仅限配送至中国大陆地区；<br />
                  周一仓库发货截止付款时间：周一当天 9:00前（北京时间）<br />
                  周四仓库发货截止付款时间：周四当天 9:00前（北京时间）
                </span>
                <br />
                <span class="delivery-time"> 运输参考时效：1-2周 </span>
                <!-- 表单 -->
                <div>
                  <table class="rate-table">
                    <caption class="table-caption">
                      菜鸟航空快线
                    </caption>
                    <thead>
                      <tr class="table-header">
                        <th class="table-cell-header">重量 (kg)</th>
                        <th class="table-cell-header">运费 (日元)</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="table-row">
                        <td class="table-cell" style="background-color: transparent">0.1kg以内</td>
                        <td class="table-cell">590</td>
                      </tr>
                      <tr class="table-row">
                        <td class="table-cell" style="background-color: transparent">0.2kg以内</td>
                        <td class="table-cell">630</td>
                      </tr>
                      <tr class="table-row">
                        <td class="table-cell" style="background-color: transparent">0.3kg以内</td>
                        <td class="table-cell">670</td>
                      </tr>
                      <tr class="table-row">
                        <td class="table-cell" style="background-color: transparent">0.4kg以内</td>
                        <td class="table-cell">710</td>
                      </tr>
                      <tr class="table-row">
                        <td class="table-cell" style="background-color: transparent">0.5kg以内</td>
                        <td class="table-cell">750</td>
                      </tr>
                      <tr class="table-row">
                        <td class="table-cell" style="background-color: transparent">0.6kg以内</td>
                        <td class="table-cell">790</td>
                      </tr>
                      <tr class="table-row">
                        <td class="table-cell" style="background-color: transparent">0.7kg以内</td>
                        <td class="table-cell">830</td>
                      </tr>
                      <tr class="table-row">
                        <td class="table-cell" style="background-color: transparent">0.8kg以内</td>
                        <td class="table-cell">870</td>
                      </tr>
                      <tr class="table-row">
                        <td class="table-cell" style="background-color: transparent">0.9kg以内</td>
                        <td class="table-cell">910</td>
                      </tr>
                      <tr class="table-row">
                        <td class="table-cell" style="background-color: transparent">1.0kg以内</td>
                        <td class="table-cell">950</td>
                      </tr>
                      <tr class="table-row">
                        <td class="table-cell" style="background-color: transparent">...</td>
                        <td class="table-cell">...</td>
                      </tr>
                    </tbody>
                  </table>
                  <p>*完整价格详情，请到乐一番官网查看。</p>
                </div>
                <span style="color: red; font-size: 12rem; display: block; margin-top: 10rem"
                  >*注：运费不包含手续费</span
                >
                <div style="font-size: 12rem">
                  <span style="display: block; margin: 8rem 0">发货注意事项：</span>
                  <div style="margin-top: 8rem; line-height: 1.5">
                    <div>
                      1、本线路使用全新纸箱进行寄送。 如对此有任何不便, 建议您改选其他运输方式。
                    </div>
                    <div>
                      2、选择本线路进行【申请发货】,
                      所填报的申报信息均由菜鸟物流相关工作人员进行人工审核, 所需时效预估:
                      3~5个工作日。
                    </div>
                  </div>
                  <div style="color: red; margin: 8rem 0; line-height: 1.5">
                    <div>
                      *请注意：若您提交的申报信息未能通过审核，您的包裹将返回至【包裹管理】页面。届时请您根据实际情况重新提交【申请发货】或选择乐一番其它运输方式。
                    </div>
                    <div>
                      *请注意：若您提交的申报信息未能通过审核，您的包裹将返回至【包裹管理】页面。届时请您根据实际情况重新提交【申请发货】或选择乐一番其它运输方式。
                    </div>
                  </div>
                  <div style="line-height: 1.5">
                    3、建议寄送单个包裹总价值不超过1,000元 ( 人民币 ),
                    超过可能被海关判定为非个人自用，有被退运的风险，请悉知。
                  </div>
                  <div style="color: red; line-height: 1.5; margin: 8rem 0">
                    4、根据海关规定，缴纳关税金额未超过50元（人民币）（含50）免收，高于50元（人民币）需缴纳。
                  </div>
                  <div>*请注意：最新税率以海关总署公示为准，点击此处查看：</div>
                  <div style="color: blue; margin-bottom: 5rem">
                    https://www.gov.cn/zhengce/zhengceku/2019-11/05/content_5448799.htm
                  </div>
                  <div>
                    5、本线路提交发货后，若因退货、更改线路等为由希望取消发货，需收取每单500日元手续费，已付款包裹恕无法取消。
                  </div>
                  <div style="margin-top: 10rem">
                    <span>本线路更多规则及限制请参考: </span>
                    <u style="color: blue">菜鸟航空快线说明</u>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab title="顺丰关税补贴快线">
              <div style="padding: 0 16rem; font-size: 12rem">
                <div>
                  仓库发货计划：正常每周5批次发货计划（每周一至周五），仅限配送至中国大陆地区
                </div>
                <div>
                  <div>*周一仓库发货截止付款时间：上周五 9:00前（北京时间）</div>
                  <div>*周二仓库发货截止付款时间：周一 9:00前（北京时间）</div>
                  <div>*周三仓库发货截止付款时间：周二 9:00前（北京时间）</div>
                  <div>*周四仓库发货截止付款时间：周三 9:00前（北京时间）</div>
                  <div>*周五仓库发货截止付款时间：周四 9:00前（北京时间）</div>
                </div>
                <div>运输参考时效：1周左右</div>
              </div>
            </van-tab>
            <van-tab title="飞鸟关税补贴快线">内容 3</van-tab>
            <van-tab title="蜂鸟关税补贴专线">内容 4</van-tab>
            <van-tab title="日本邮政">内容 5</van-tab>
            <van-tab title="DHL国际航空快线">内容 6</van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
let loading = ref(true)
setTimeout(() => {
  loading.value = false
}, 500)
</script>

<style lang="less" scoped>
.logistics-container {
  position: relative;
  box-sizing: border-box;

  .back-button {
    border: 0;
    background-color: transparent;
    position: fixed;
    top: 2%;
    left: 2%;
  }

  .title-container {
    width: 100vw;
    height: 42rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2%; // 添加一些顶部间距以避免被固定按钮遮挡

    .title {
      font-weight: 600;
    }
  }

  .content {
    // margin-top: 46rem; // 确保内容不会被标题栏遮挡

    .description {
      padding: 0 16rem;
      font-size: 14rem;

      .description-margin {
        margin-top: 10rem;
      }
    }

    .tabs-container {
      overflow-y: auto;
      height: calc(100vh - 88rem); // 设置高度为视口高度减去标题栏和返回按钮的高度

      .tabs {
        padding: 0;
        line-height: 1.2;

        .tab-content {
          margin-bottom: 16rem;
          padding: 0;
          overflow: scroll;

          .tab-description {
            padding: 0 16rem;
            margin-top: 10rem;

            .weight-info {
              font-size: 12rem;
              width: calc(100% - 32rem);
            }

            .shipment-plan {
              font-size: 12rem;
              margin-top: 10rem;
              display: inline-block;
            }

            .shipment-plan-time {
              color: red;
              font-size: 12rem;
            }

            .delivery-time {
              font-size: 12rem;
              color: #777;
            }

            .rate-table {
              width: 100%;
              font-size: 13rem;
              .table-caption {
                font-weight: 600;
                border: 1px #d0dee5 solid;
                background-color: #ffb1b1;
                height: 30rem;
                font-size: 15rem;
                line-height: 30rem;
              }

              thead {
                .table-header {
                  height: 30rem;
                  .table-cell-header {
                    border: 1px #d0dee5 solid;

                    text-align: center;
                    background-color: #ffb1b1;
                  }
                }
              }

              tbody {
                .table-row {
                  height: 30rem;

                  .table-cell {
                    border: 1px #d0dee5 solid;
                    text-align: center;
                    background-color: rgb(255, 235, 235);
                  }
                }
              }
            }
            p {
              height: 30rem;
              font-size: 15rem;
              width: 100%;
              line-height: 30rem;
              text-align: left;
              border: 1px #d0dee5 solid;
              padding-left: 10rem;
            }
          }
        }
      }
    }
  }
}
</style>